<template>
  <div class="my-record" :class="{'my-record-fixed':isFixed}">
    <div class="mini-title">我保存的搜索条件</div>
    <div class="content clearfix">
      <template v-for="item in recordList" >
        <m-recordItem :detail="item" :editId.sync="editId" :selectedId.sync="selectedId" 
        @edit="doEdit" 
        @select="doSelect"
        @cancelEdit="doCancel"
        @change="doChange"></m-recordItem>
      </template>
    </div>
  </div>
</template>

<script>
import RecordItem from './components/item'
  export default {
    components: {
      'm-recordItem' : RecordItem
    },
    data () {
      return {
        editId: '-1',
        selectedId: '-1',
        isFixed: false,
        recordList: [
          {
            id: 1,
            title: '百度凤巢候选人'
          },
          {
            id: 2,
            title: '阿里巴巴天池候选人'
          },
          {
            id: 3,
            title: '百度后台开发'
          },
          {
            id: 4,
            title: '抖音产品'
          },
          {
            id: 5,
            title: '华为'
          },
          {
            id: 6,
            title: '网易'
          }
        ]
      }
    },
    created() {
      window.addEventListener('scroll', () => {
        if(this.$route.path.indexOf('/talent_pool') == 0){
          this.initSticky()
        }
      })
    },
    methods: {
      /**
       * @description 该条数据在编辑中， 其他数据退出编辑状态
       */
      doEdit(id) {
        this.editId = id
      },
      initSticky() {

      },
      /**
       * @description 该条数据被选中时， 其他数据退出选中状态，表格重新加载数据
       */
      doSelect(id) {
        this.selectedId = id
      },
      doCancel() {
        this.editId = '-1'
      },
      doChange(val) {
        const temp = this.recordList.find(t => t.id == val.id)
        temp.title = val.title
        this.editId = '-1'
      }
    }
  }
</script>

<style lang="scss">
  .my-record{
    width: 200px;
    flex-grow: 0;
    box-sizing: border-box;
    padding: 15px 10px;
    background: #f9f9f9;
    margin-right: 20px;
    .content{
      margin: 28px -4px;
    }
  }

 
</style>
